<template>
    <div id="box">
        <div class="HeaderBox">
            <Logo class="logo"></Logo>
            <Search class="sousuo"></Search>
            <Register class="register"></Register>
            <Select class="select"></Select>

        </div>
        <div class="middle">
            <div style="width: 1100px;height:35px;margin: auto;padding-top: 5px;font-size: 13px;line-height: 30px;">
                <router-link to="" tag="span" class="shouye" style="cursor:pointer;"><a-icon type="home" />首页</router-link>
                <span style="margin: 0 6px">/</span><span style="cursor:pointer;">视频详情</span>
            </div>
            <div style="margin:auto;width:1100px;height: 250px;background-color: white;display: flex;justify-content: space-between;padding:15px 15px 20px 15px">
                <div style="width: 31%"><img :src="arr.coverFileUrl" alt=""></div>
                <div style="width: 60%" class="biaoTi">
                    <p style="font-weight: 600;color: black;font-size: 18px;margin-top: 15px;" :title="title">{{arr.courseTitle}}</p>
                    <p style="font-size: 12px;color:#A7A7A7">累计{{arr.courseBanner}}人学习</p>
                    <div v-if="isFree=1">
                        <h3 style="margin-left: 40px;font-size: 20px;font-weight: 500;color:#00cf8c">免费</h3>
                        <button class="guankanBtn">立即观看</button>
                    </div>
                </div>
                <div style="width: 9%"></div>
            </div>
            <div style="width:1100px;margin: 30px auto; background-color:white;">
                <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="课程描述">
                        <div v-html="arr.courseDetail" style="padding: 10px"></div>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="目录" force-render>
                        <ul v-for="(item,index1) in directory" :key="index1" style="padding: 10px">
                            <li style="font-size: 22px;padding: 5px 0 5px 10px;color: rgba(0,0,0,.85);font-weight: 500;" >{{index1+1}}、{{item.sectionName}}</li>
                            <li class="directory" v-for="(item,index) in item.subSections" :key="index" style="height: 50px;line-height: 30px;padding: 10px 20px;background: #f2f2f2;margin: 10px 0;" >
                                {{index1+1}}-{{index+1}}  {{item.sectionName}}
                            </li>
                        </ul>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="评论"  style="padding: 10px">
                        <div>
                            <p>评论</p>
                            <p><a-rate :default-value="xing" disabled /></p>
                            <textarea data-v-411944a1="" placeholder="请发表您对课程的评价" class="ant-input" style="height: 142px; min-height: 142px; max-height: 142px; overflow-y: hidden;"></textarea>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
            <MyFooter></MyFooter>
        </div>

    </div>

</template>

<script>




    import Logo from "../components/HeaderSon/Logo";
    import Search from "../components/HeaderSon/Search";
    import Register from "../components/HeaderSon/Register";
    import Select from "../components/HeaderSon/Select";
    import MyFooter from "../components/MyFooter"
    export default {
        name: "Details",
        data(){
            return{
                title:"",
                arr:"",
                xing:"",
                directory:"",
            }
        },
        components:{
            Logo,Search,Register,Select,MyFooter
        },
        created() {
            let courseId = this.$route.query.courseId
            this.$axios.get(`http://wkt.myhope365.com/pc/course/detail/${courseId}`).then((res)=>{
                console.log(res.data)
                this.title=res.data.data.courseTitle
                this.arr = res.data.data
                this.xing = res.data.score
                this.directory = res.data.data.sections
                console.log( res.data.data.sections)
            })
        },
        methods:{
            callback(key) {
                console.log(key);
            },
        }
    }
</script>

<style scoped>
    .HeaderBox{
        position: relative;
        margin: auto;
        width: 1100px;
        height: 100px;
    }
    .HeaderBox>div{
        float: left;
    }
    .select{
        position: absolute;
        top: 13px;
        left: 205px;
    }
    .sousuo{
        width: 370px;
        margin-left: 80px;
    }
    .biaoTi>p{
        margin-left: 40px
    }
    .biaoTi>p:first-child{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .middle{
        margin-buttom:30px;
        width: 100%;
        background-color: #F4F4F4;
    }
    .guankanBtn{
        margin-top: 25px;
        margin-left: 40px;
        background-color: #00cf8c;
        color: white;
        width: 130px;
        height: 40px;
        border: 0;
        transition: background-color 0.4s;
    }
    .guankanBtn:hover{
        cursor: pointer;
        background-color: rgba(0,207,140,0.7);
    }
    .directory:hover{
        color: #00cf8c;
    }
</style>